{% extends "datapanel/base.html" %}
{% block content %}
{% load static %}
{% comment %} load my filters {% endcomment %}
{% load concat_string %}

<div class="d-flex flex-row justify-content-between mb-1">
    <div class="px-2">
    <h3> Amazon商品数据 </h3>
    </div>
    <!--保存内容至csv文件-->
    <div>
    <a href="{% url 'datapanel:tocsv' %}" class="btn btn-info">保存至文件</a> 
    </div>
</div>
<table class="table table-bordered border-2">
    <thead>
        <tr>
            <th>id</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>图片</th>
            <th>卖家</th>
            <th>评价数</th>
            <th>近1月销量</th>
            <th>接口</th>
            <th>采集时间</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for item in page_obj %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name |truncatechars:"40" }}</td>
            <td>{{ item.price|concat_string:item.currency }}</td>
            <td><img class="img-product" src="{% static item.image_path %}" alt="{{ item.short_name }}" width="100" height="100"></td>
            <td>{{ item.seller }}</td>
            <td>{{ item.reviews }}</td>
            <td>{{ item.bought_last_month }}</td>
            <td>{{ item.conn_tech }}</td>
            <td>{{ item.create_time | date:"m-d H:i:s" }}</td>
            <td><a href="{{ item.get_absolute_url }}" target="_blank">详细</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% if is_paginated %}
    <div class="pagination">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1">&laquo; 首页</a>
                <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
            {% endif %}
            <span class="current">
                &nbsp;当前页 {{ page_obj.number }}/{{ page_obj.paginator.num_pages }} &nbsp;
            </span>
            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}">下一页</a>
                <a href="?page={{ page_obj.paginator.num_pages }}">末页 &raquo;</a>
            {% endif %}
        </span>
    </div>
{% endif %}

{% endblock content %}